<!--
 * @Author: wuxiangyi
 * @Date: 2022-09-04 12:21:42
 * @LastEditors: wuxiangyi
 * @LastEditTime: 2022-09-05 11:00:01
 * @FilePath: /my-project/src/components/HelloWorld.vue
 * @Description: 
 * 
-->

<template>
  <div class="hello">
    <el-card class="box-card" style="height: 100%;overflow: scroll">
      <div slot="header" class="clearfix" v-bind:style="{textAlign:'left'}">
        <!-- <span v-bind:style="{fontWeight: 'bold'}">SQL 过滤筛选器</span> -->
        <el-radio v-model="datasource.condition" label="AND">AND</el-radio>
        <el-radio v-model="datasource.condition" label="OR">OR</el-radio>
        <div style="float: right;">
          <el-button type="primary" size="small" @click="submit">Generate SQL</el-button>
          <el-button type="success" icon="el-icon-plus" size="small" @click="addRule">Add rule</el-button>
          <el-button type="success" icon="el-icon-plus" size="small" @click="addGroup">Add group</el-button>
        </div>
      </div>
      <div class="text item" v-for="(obj,key) in datasource.rule" :key="key">
        <el-select v-model="obj.col" placeholder="请选择" :size="size">
          <el-option v-for="item in colOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="obj.con" placeholder="请选择" :size="size">
          <el-option v-for="item in conOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input placeholder="请输入内容" style="width: 200px" :size="size" v-model="obj.value"></el-input>
        <el-button type="danger" :size="size" @click="deleteRule(key)" style="float: right">Delete
        </el-button>
        <el-divider></el-divider>
      </div>
      <div class="text item" v-for="(obj,key) in datasource.group" :key="key">
        <Son :props="datasource.group[key]" :currentKey="key" @get="onGet" />
      </div>
    </el-card>
    <el-dialog title="提示" :visible.sync="show" width="30%" style="textAlign:left;">
      <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" :value="sqlResult" v-model="sqlResult"
        readonly="true">
      </el-input>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="time" label="时间">
        </el-table-column>
        <el-table-column prop="type" label="类型">
        </el-table-column>
        <el-table-column prop="user_id" label="用户标识">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="show = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Son from "./Son.vue";
import axios from 'axios'
var data = {
  // 组件大小
  size: 'medium',
  // 展示sql
  show: false,
  // sql语句
  sqlResult: '',
  tableData: [],
  colOptions: [
    {
      value: 'user_id',
      label: 'user_id'
    }, 
    {
      value: 'name',
      label: 'name'
    }, 
    {
      value: 'create_time',
      label: 'create_time'
    }, 
    {
      value: 'type',
      label: 'type'
    }
  ],
  conOptions: [
    {
      value: 'equal',
      label: 'equal',
    },
    {
      value: 'not equal',
      label: 'not equal'
    }
  ],
  // 数据源
  datasource: {
    condition: 'AND',
    rule: [
      {
        col: 'user_id',
        con: 'equal',
        value: ''
      }
    ],
    group: [
      
    ]
  }
}
export default {
    name: "HelloWorld",
    data() {
        return data;
    },
    methods: {
        submit() {
            console.log("我被电击了", this.datasource.rule);
            console.log(this.datasource.group)
        },
        // 添加规则
        addRule() {
            this.datasource.rule.push({
                col: "user_id",
                con: "equal",
                value: ""
            });
        },
        // 删除规则
        deleteRule(key) {
            this.datasource.rule.splice(key, 1);
        },
        // 添加组
        addGroup() {
            this.datasource.group.push({
                condition: "AND",
                rule: [
                    {
                        col: "user_id",
                        con: "equal",
                        value: ""
                    }
                ],
                group: []
            });
        },
        // 删除组信息回调
        onGet(param) {
          this.datasource.group.splice(param , 1)
        },
        // 获取sql
        submit() {
          console.log(JSON.stringify(this.datasource))
          axios({
            method: 'post',
            url: '/api/actCard/getParsingSql',
            data: {
              data: JSON.stringify(this.datasource)
            }
          }).then((response) => {
            if (response.data && response.data.res) {
              this.sqlResult = "\"" + response.data.data.sql + "\""
              // console.log(response.data.data.array)
              this.tableData = response.data.data.array
              this.show = true
            } else {
              this.$message.error('服务器请求失败，请检查Java端是否正常');
            }
          } , (e) => {
            this.$message.error('服务器请求失败，请检查Java端是否正常');
          })
        }
    },
    components: { Son }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

.hello {
  height: 100vh;
  width: 55vw;
  margin: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.text {
  font-size: 14px;
  text-align: left;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}
</style>
